<template>
  <component is="a-modal" v-model:visible="visible" :width="1000" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit">
    <!-- 表单信息 start -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="height: 70vh;">
      <a-form-item label="分类" field="cate_id">
        <a-select :fieldNames="{ value: 'id', label: 'name' }" v-model="formData.cate_id" placeholder="请选择"
          :allow-clear="true" @change="refresh">
          <a-option v-for="(item, index) of paramsData.cate" :value="item.id" :label="item.name" />
        </a-select>
      </a-form-item>
      <a-form-item label="标题" field="title">
        <a-input v-model="formData.title" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="来源" field="source">
        <a-input v-model="formData.source" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="状态" field="state">
        <sa-radio v-model="formData.state" :data="ENUMS.STATE"></sa-radio>
      </a-form-item>
      <a-form-item label="置頂" field="isTop">
        <sa-radio v-model="formData.isTop" :data="ENUMS.IS"></sa-radio>
      </a-form-item>
      <a-form-item label="推荐" field="isRec">
        <sa-radio v-model="formData.isRec" :data="ENUMS.IS"></sa-radio>
      </a-form-item>
      <a-form-item label="阅读数量" field="cmtsNum">
        <a-input-number v-model="formData.cmtsNum" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="点赞数量" field="fabulous">
        <a-input-number v-model="formData.fabulous" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="简介描述" field="describe">
        <a-textarea v-model="formData.describe" style="height: 130px;" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="封面图" field="img">
        <sa-upload-image v-model="formData.img" :limit="3" :multiple="true"></sa-upload-image>
      </a-form-item>
      <a-form-item label="详情类型" field="isVideo">
        <sa-radio v-model="formData.isVideo" :data="RADIO"></sa-radio>
      </a-form-item>
      <a-form-item label="详情" field="content" v-show="formData.isVideo == 0">
        <ma-wangEditor v-model="formData.content" />
      </a-form-item>
      <a-form-item label="视频" required v-show="formData.isVideo == 1">
        <sa-upload-file v-model="formData.video_url"></sa-upload-file>
      </a-form-item>
      <a-form-item label="SEO关键字" field="seo_keywords">
        <a-input v-model="formData.seo_keywords" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="SEO简介" field="seo_description">
        <a-input v-model="formData.seo_description" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="操作密码" field="admin_pay_password">
        <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="谷歌验证码" field="google_code">
        <a-input v-model="formData.google_code" placeholder="请输入" />
      </a-form-item>

    </a-form>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import infoApi from '@/api/message/info'
import SaRadio from '@cps/sa-radio/index.vue'
import SaUploadImage from '@cps/sa-upload-image/index.vue'
import MaWangEditor from '@cps/ma-wangEditor/index.vue'
import SaUploadFile from '@cps/sa-upload-file/index.vue'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
import tool from '@/utils/tool'
const paramsData = ref({})
// 获取角色组列表
const getParams = async () => {
  const { data } = await infoApi.addInfoParasm()
  paramsData.value = { ...data }
  paramsData.value.area = tool.simpleTransformArray(data.area)
  console.log('111', paramsData.value);
}
const RADIO = [{ value: 0, title: '图文' }, { value: 1, title: '视频' }]
const emit = defineEmits(['success'])
console.log('ENUMS', ENUMS.STATE);
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)

let title = computed(() => {
  return (mode.value == 'add' ? '新增信息列表' : '编辑信息列表')
})
// 表单信息
const formData = reactive({
  cate_id: 1,
  isVideo: 0,
  title: '',
  source: '系统小编',
  state: 1,
  isTop: 1,
  isRec: 1,
  cmtsNum: 0,
  fabulous: 0,
  describe: '',
  file: '',
  img: [],
  video_url: [],
  content: '',
  seo_description: '',
  seo_keywords: '',
  admin_pay_password: '',
  google_code: '',
  id: ''
})

// 验证规则
const rules = ref({
  title: [{ required: true, message: '请输入' }],
  admin_pay_password: [{ required: true, message: '请输入' }],
  google_code: [{ required: true, message: '请输入' }],
  state: [{ required: true, message: '请选择' }],
  area: [{ required: true, message: '请选择' }],
  cate_id: [{ required: true, message: '请选择' }],
  source: [{ required: true, message: '请输入' }],
  isTop: [{ required: true, message: '请选择' }],
  isRec: [{ required: true, message: '请选择' }],
  cmtsNum: [{ required: true, message: '请输入' }],
  fabulous: [{ required: true, message: '请输入' }],
  isVideo: [{ required: true, message: '请选择' }],
  describe: [{ required: true, message: '请输入' }],
  content: [{ required: true, message: '请输入' }],
  video_url: [{ required: true, message: '请上传' }],
});
// 打开弹框
const open = async (type = 'add', id = '') => {
  mode.value = type
  visible.value = true
  formRef.value?.resetFields()
  await initPage()
  await getParams()
  if (type == 'add') {

  } else {
    formData.id = id
  }
}

// 初始化页面数据
const initPage = async () => {
}

// 设置数据
const setFormData = async (data) => {  
  formData.video_url=[]
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key]
      if (data.video_url != null && data.isVideo == 1) {
        formData.video_url=[data.video_url]
       }
    }
  }
  console.log('222',formData);
}

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate()
  if (formData.isVideo == 1 && formData.video_url == '') {
    Message.error('请上传视频')
    done(false)
    return false
  } else {
    if (!validate) {
      loading.value = true
      try {
        let data = { ...formData }
        data.img = data.img.join('|')
        if (data.isVideo == 1 && data.video_url!='') { 
          data.video_url=data.video_url.join(' ')
        }
        let result = {}
        if (mode.value === 'add') {
          // 添加数据
          data.id = undefined
          result = await infoApi.addInfo(data)
        } else {
          // 修改数据
          result = await infoApi.updateInfo(data)
        }
        if (result.code === 200) {
          Message.success('操作成功')
          emit('success')
          done(true)
        }
        // 防止连续点击提交
        setTimeout(() => {
          loading.value = false
        }, 500)
      } catch {
        loading.value = false
      }
    }
    done(false)
  }
}

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open, setFormData })
</script>
